<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素样式操作</title>
		<!-- 元素样式操作：直接操作元素的样式下的属性和属性值
		 css()						功能--
									1个参：传入css属性名
									功能：获取匹配元素集合中第一个元素的css属性值
									2个参：传入css属性名和属性值
									功能：设置匹配元素集合中所有元素的css属性值
									n个参：传入多个css属性名和属性值
									语法糖：css({"属性名":"属性值",
												"属性名":"属性值",
												......
												"属性名":"属性值",
									})
		 width()和height()		功能：匹配元素集合中第一个元素的宽高度
								无参：获取匹配元素集合中第一个元素的宽高度
								有参：设置匹配元素集合中第一个元素的宽高度
		 outerWidth()和outHeight()
		 出现原因：元素在盒子中，盒子模型，宽度计算方式：内外边距+边框+内容
		 无参：获取元素的宽高度，计算盒子模型：内边距+边框
		 有参：传入bool值，true时，计算盒子模型：内外边距+边框
		 -->
		 <script src="../js/jquery-1.11.1.js"></script>
		 <style>
		 			 .box{
		 				 background-color: aqua;
		 				 padding: 20px;
		 				 margin: 20px;
		 				 border: 5px #ff55ff solid;
		 			 }
		 			 .result{
		 				 margin-top: 10px;
		 				 font-weight: bold;
		 			 }
		 </style>
	</head>
	<body>
		<!-- 创建两个div平行  创建六个按钮 -->
		<!-- css:	.box添加样式：背景颜色、内外边距：20px 边框5px
			 .result添加样式：上外边距：10px，字体加粗
			 引入jq框架
		 -->
		<!-- 1.效果显示区域 -->
		<div class="box" id="targetBox"></div>
			<button id="getColorbtn">获取颜色属性值</button>
			<button id="setColorbtn">设置颜色效果</button>
			<button id="setBtn">设置多属性效果</button>
			<button id="gsBtn">获取元素高度/设置元素宽度</button>
			<button id="bpBtn">获取高度（内边距+边框）</button>
			<button id="bpmBtn">获取高度（内外边距+边框）</button>
		<!-- 2.结果提示功能区域 -->
		<div class="result" id="result"></div>
		
		<script>
			/* 1.点击获取颜色属性值 按钮 获取颜色值并且打印在页面上 */
			$("#getColorbtn").click(function(){
				// 获取css属性值方式：传入属性名即可
				var bgColor=$(".box").css("background-color");
				// 页面上打印属性值
				$("#result").text("获取的属性值是："+bgColor)
			});
			
			/* 2.点击设置颜色属性值 按钮 设置颜色值并且打印在页面上 */
			$("#setColorbtn").click(function(){
				// 获取css属性值方式：传入属性名即可
				var setColor=$(".box").css("background-color","aquamarine");
				// 页面上打印属性值
				$("#result").text("改变后的颜色为：aquamarine")
			});
			
			// 3.点击 设置多重属性 按钮 圆、背景色、阴影
			$("#setBtn").click(function(){
				// 获取css属性值方式：传入属性名即可
				$(".box").css({
				"background-color":"red",
				"border-radius":"50%",
				"border":"#ff0 5px solid",
				"width":"350px",
				"height":"350px",
				"box-shadow":"10px 10px 20px #55ffff",
				"background-image":"url(../img/1.png)",
				"background-size":"100% 100%"
				});
				});
				
				
			// 4.点击	获取、设置宽度
			$("#gsBtn").click(function(){
				var w=$(".box").width();
				$("#result").text("获取的宽度是："+w+"px");
			});
			
			// 5.点击 获取高度 按钮 计算box空间高度
			$("#bpBtn").click(function(){
				var bp=$(".box").outerHeight();
				$("#result").text("获取的高度是："+bp+"px");
			});
			
			// 6.点击 获取高度 按钮 计算box空间高度
			$("#bpmBtn").click(function(){
				var bpm=$(".box").outerHeight(true);
				$("#result").text("获取的高度(内外边距+边框)是："+bpm+"px");
			});
		</script>
	</body>
</html>